<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <!--滚动内容区域-->
            <scroll-view :refresher-enabled="false" class="scroll-content" @scrolltolower="scrolltolower"
                @scroll="scrollPage" @refresherrefresh="refresherpulling" :refresher-triggered="isrefresher" scroll-y
                :lower-threshold="110"  show-scrollbar="false">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top" :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->
                </view>
                <view class="scroll-card">
                    <!-- 背景图轮播哦 -->
                    <view class="sur_box_bg">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/laundryCare_bg.png"  alt="">
                    </view>
                    <view class="card_top">
                        <view class="card_top_content">
                            <view class="service_item" @tap="toCategorize(index)" v-for="(item,index) in serviceItems" :key="index">
                                <view class="service_icon"> 
                                     <img :src="item.iconUrl" alt="" mode="widthFix">
                                </view>
                                <view class="service_text">{{item.name}}</view>
                            </view>
                            <!-- <view class="service_item" @tap="toCategorize(0)">
                                <view class="service_icon">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/laundry.png" alt="" mode="widthFix">
                                    </view>
                                <view class="service_text">洗衣</view>
                            </view>
                            <view class="service_item" @tap="toCategorize(1)">
                                <view class="service_icon"> 
                                     <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/washingShoes_icon.png" alt="" mode="widthFix">
                                </view>
                                <view class="service_text">洗鞋修鞋</view>
                            </view>
                            <view class="service_item" @tap="toCategorize(2)">
                                <view class="service_icon"> 
                                    <img  src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/homeTextiles_icon.png" alt="" /> </view>
                                <view class="service_text">家纺清洗</view>
                            </view>
                            <view class="service_item" @tap="toCategorize(3)">
                                <view class="service_icon"> <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/tailor_icon.png" alt="" /> </view>
                                <view class="service_text">裁衣改衣</view>
                            </view> -->
                        </view>
                        <view class="card_top_other">
                            <view class="other_padding">
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">三方对比</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">极速响应</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">安心保证</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">售后无忧</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="card_banner">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/laundryCare_banner.png" alt="">
                    </view>
                    <!-- 超值洗衣 -->
                    <view class="classificationBox">
                        <view class="classificationBoxTop">
                            <view class="classificationTitle">超值洗衣</view>
                            <view class="act_more" @click="toCategorize(0)">
								<span class=" act_t" style="display: inline-block;">查看更多</span><van-icon
									name="arrow" />
							</view>
                        </view>
                        <view class="classificationBoxContent">
                            <view class="classificationItem" v-for="(item,index) in classifyItemList" :key="index">
                                <view class="serviceGoodsImg"><img :src="item.imgurl" alt=""  mode="widthFix"></view>
                                <view class="serviceGoods_title">{{ item.title }}</view>
                                <view class="serviceGoods_price">￥{{item.price}}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 洗鞋修鞋 -->
                    <view class="classificationBox">
                        <view class="classificationBoxTop">
                            <view class="classificationTitle">洗鞋修鞋</view>
                            <view class="act_more" @click="toCategorize(1)">
								<span class=" act_t" style="display: inline-block;">查看更多</span><van-icon
									name="arrow" />
							</view>
                        </view>
                        <view class="classificationBoxContent">
                            <view class="classificationItem" v-for="(item,index) in classifyItemList" :key="index">
                                <view class="serviceGoodsImg"><img :src="item.imgurl" alt=""  mode="widthFix"></view>
                                <view class="serviceGoods_title">{{ item.title }}</view>
                                <view class="serviceGoods_price">￥{{item.price}}</view>
                            </view>
                        </view>
                    </view>
                    <view class="classificationBox">
                        <view class="classificationBoxTop">
                            <view class="classificationTitle">家纺清洗</view>
                            <view class="act_more" @click="toCategorize(2)">
								<span class=" act_t" style="display: inline-block;">查看更多</span><van-icon
									name="arrow" />
							</view>
                        </view>
                        <view class="classificationBoxContent">
                            <view class="classificationItem" v-for="(item,index) in classifyItemList" :key="index">
                                <view class="serviceGoodsImg"><img :src="item.imgurl" alt=""  mode="widthFix"></view>
                                <view class="serviceGoods_title">{{ item.title }}</view>
                                <view class="serviceGoods_price">￥{{item.price}}</view>
                            </view>
                        </view>
                    </view>
                    <view class="classificationBox">
                        <view class="classificationBoxTop">
                            <view class="classificationTitle">裁缝改衣</view>
                            <view class="act_more" @click="toCategorize(3)">
								<span class=" act_t" style="display: inline-block;">查看更多</span><van-icon
									name="arrow" />
							</view>
                        </view>
                        <view class="classificationBoxContent">
                            <view class="classificationItem" v-for="(item,index) in classifyItemList" :key="index">
                                <view class="serviceGoodsImg"><img :src="item.imgurl" alt=""  mode="widthFix"></view>
                                <view class="serviceGoods_title">{{ item.title }}</view>
                                <view class="serviceGoods_price">￥{{item.price}}</view>
                            </view>
                        </view>
                    </view>
                    <!-- <view class="card_three_banner middle">
                        <view class="middle_left middle_position">
                            <view class="middle_left_content">
                                <view class="middle_title ">做家务2次</view>
                                <view class="middle_subtitle ">套餐服务</view>
                                <view class="middle_discount ">新客特惠 <van-icon name="arrow" /> </view>
                            </view>
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/doHomeWork.png"
                                alt="">
                        </view>
                        <view class="middle_right">
                            <view class=" b12 middle_position middle_right_top">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pickUpChildren.png" alt="">
                                <view class="middle_right_content">
                                    <view class="middle_title ">黄金时段</view>
                                    <view class="middle_subtitle ">接送小孩</view>
                                    <view class="middle_discount ">GO <van-icon name="arrow" /> </view>
                                </view>
                            </view>

                            <view class=" middle_position middle_right_bottom">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/takeCareOld.png" alt="">
                                <view class="middle_right_content">
                                    <view class="middle_title ">周末限时特惠</view>
                                    <view class="middle_subtitle ">照顾老人</view>
                                    <view class="middle_discount ">GO <van-icon name="arrow" /> </view>
                                </view>
                            </view>
                        </view>
                    </view> -->
                    <!-- 流程 -->
                    <view class="card_process">
                        <view class="card_process_title">服务流程</view>
                        <view class="card_process_content">
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/reserve.png"
                                        alt="" /> </view>
                                <view class="process_text">预约成功</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img" ><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                    alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serve.png"
                                        alt="" /> </view>
                                <view class="process_text">上门服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img" ><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                    alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/finish.png"
                                        alt="" /> </view>
                                <view class="process_text">完成服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img" ><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                    alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/judge.png"
                                        alt="" /> </view>
                                <view class="process_text">服务评价</view>
                            </view>
                        </view>

                    </view>
                    <view class="card_service_list">
                        <view class="goodsListBox">
                            <view class="serviceGoodsList" v-for="(itemL, indexL) in serviceGoodsList" :id="indexL"
                                :key="indexL" @click="toGoodsDetail(itemL, indexL)">
                                <view class="serviceGoods_img"> <img :src="itemL.imgurl" alt="" mode="widthFix"> </view>
                                <view class="serviceGoods_title pl15">{{ itemL.title }}</view>
                                <view class="serviceGoods_subtitle pl15">{{ itemL.detail }}</view>
                                <view class="serviceGoods_price pl15">￥{{ itemL.price }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>

export default {
    components: {

    },
    data () {
        return {
            name: '',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            isrefresher: false,
            title:'洗护养护',
            titleDate:"12月30日  23:59前可享",
            serviceItems:[
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/laundry.png',
                    name:'洗衣',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/washingShoes_icon.png',
                    name:'洗鞋修鞋',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/homeTextiles_icon.png',
                    name:'家纺清洗',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/tailor_icon.png',
                    name:'裁衣改衣',
                }
            ],
            classifyItemList:[
                {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/yifu_pic.png',
                title: '1件衬衣',
                price: '10'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/yifu_pic.png',
                title: '2件衬衣',
                price: '19'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/yifu_pic.png',
                title: '2件衬衣',
                price: '19'
              },
            ],
            serviceGoodsList: [ //热卖商品
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/yifu_pic.png',
                detail: '1次*4小时',
                title: '1件衬衣',
                price: '10'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/yifu_pic.png',
                detail: '1次*4小时',
                title: '2件衬衣',
                price: '19'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/takeCareOldPic.png',
                detail: '1次*4小时',
                title: '2件衬衣',
                price: '16'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/takeCareOldPic.png',
                detail: '1次*4小时',
                title: '2件衬衣',
                price: '16'
              }
            ],
        }
    },
    onLoad (options) {
        console.log(options, 'options.name')
    },
    onReady () {
        this.onRefresherMethod()
        this.topStyleWhite()
    },
    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod () {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            this.loadingIsShow = false
                    // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                    this.time = setTimeout(e => {
                        this.isrefresher = false
                    }, 300)
            // if (this.name === '心率记录') {
            //     Promise.all([this.getHearRecordApiMethod()]).then(() => {
            //         console.log('所有api加载完成')
            //         this.loadingIsShow = false
            //         // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            //         this.time = setTimeout(e => {
            //             this.isrefresher = false
            //         }, 300)
            //     })
            // } else {
            //     Promise.all([this.getTemperatureRecordApiMethod()]).then(() => {
            //         console.log('所有api加载完成')
            //         this.loadingIsShow = false
            //         // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            //         this.time = setTimeout(e => {
            //             this.isrefresher = false
            //         }, 300)
            //     })
            // }
        },
        scrolltolower () {

        },
        scrollPage (e) {
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            console.log('顶部滚动距离', e.detail.scrollTop)
            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)rgba(127, 198, 185, 1)
        },
        onClickLeft () {
            uni.navigateBack()
        },
        topStyleWhite () {
            // 手机顶部
            // eslint-disable-next-line no-undef
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            })
        },
        toGoodsDetail(itemL, indexL){},
        // 跳转分类页面
        toCategorize(val){
            const params={}
            params.pageSign='1'
            params.val=val
            uni.navigateTo({
                url:'/pages/service/serviceClassification?params='+
                encodeURIComponent(JSON.stringify(params))
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	overflow: hidden;
    z-index: -2;
	background-size: 100%;
	background-color: #F9F9F9;
}
.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: #F9F9F9;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent;
}

::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep #navBar .van-icon {
    color: #111111 !important;
}


.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll-content-box{
    flex: 1;
    height: 1px;
}

.backIcon {
    margin-top: 8px;
}

.scroll-card {
    // padding: 105px 12px 48px;
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 440rpx;

	img {
		width: 100%;
		height: 440rpx;
	}

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
}

.card_top{
    border-radius: 12px;
    background: #ffffff;
    margin-left: 24rpx;
    margin-right: 24rpx;
    // margin-top: 394rpx;
    margin-top: -45rpx;
    z-index: 1;

}
.card_top_content {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 32rpx 0rpx;
    margin:0rpx 24rpx ;
    border-bottom: 1px solid #F0F0F0;

    .service_item {
        flex: auto;

        .service_icon {
            img {
                width: 60rpx;
                height:  60rpx;
            }
        }
        .service_text {
            line-height: 28rpx;
            font-size: 28rpx;
            text-align: center;
            color: #333333;
        }
    }
}


.card_top_other{
    border-radius:0 0 12px 12px;
    background: linear-gradient( #FFFFFF, #E4E7F9);

    .other_padding{
        padding: 22rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
.other_item{
    flex: 1;
    display: flex;
    align-items: center;
    line-height: 13px;
    .other_icon{
        margin-right: 5px;
        line-height: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img{
            width: 9px;
            height: 9px;
        }
    }
    .other_text{
        font-weight: 400;
        font-size: 26rpx;
        text-align: left;
        color: #333333;
        line-height: 26rpx;
    }
}


.card_banner{
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    height: 245rpx;
    img{
        width: 100%;
        height:245rpx;
    }
}

// 分类
.classificationBox{
    background-color: #ffffff;
    margin: 26rpx 24rpx 0rpx 24rpx;
    padding: 24rpx;
    border-radius: 25rpx;

    .classificationBoxTop{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .classificationTitle{
            font-size: 36rpx;
            line-height: 36rpx;
            text-align: left;
            color: #111111;
        }
        .act_more {
			// float: right;
			line-height: 20rpx;
			vertical-align: middle;
			// font-weight: 400;
			height: 20rpx;
			font-size: 20rpx;
			text-align: right;
			color: #666666;


			.act_t {
				color: #666666;
				// font-weight: 400;
				font-size: 20rpx;
                margin-right: 10rpx;
			}

			.act_Im {
				vertical-align: -2rpx;
			}
		}
    }
    .classificationBoxContent{
        display: flex;
        // justify-content: space-around;
        align-items: center;
        margin-top: 32rpx;
        .classificationItem{            
            box-shadow: 0 8px 14px 0 #ededed80;
            border-radius: 25rpx;
            width: calc((100% - 40rpx)/3);
            margin-right: 20rpx;
            .serviceGoodsImg{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .serviceGoods_title{
                max-width:calc(100% - 18px); 
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                font-size: 26rpx;
                line-height: 26rpx;
                text-align: left;
                color: #333333;
                margin-top: 15px;
                padding-left:9px;
                padding-right:9px;
            }
            .serviceGoods_price{
                font-size: 26rpx;
                text-align: left;
                color: #FF6203;
                line-height: 26rpx;
                margin-top: 16rpx;
                margin-bottom: 24rpx;
                padding-left: 18rpx;
            }
        }
        .classificationItem:last-child{
            margin-right: 0rpx;
        }
    }
}
// 三张图的banner
.card_three_banner{
    margin-top: 13px;
    margin-left: 24rpx;
    margin-right: 24rpx;
}

// 三张banner
.middle {
	margin-top: 26rpx;
	display: flex;
	height: 316rpx;
	justify-content: space-between;
	.middle_left{
        width: 58%;
        // background: linear-gradient(-54deg, #CED2F4, #E9EBFF);   //颜色不明显
        background: #CED2F4;
		img{
            position: absolute;
			width: 182rpx;
			height: 182rpx;
            right: 44rpx;
            bottom: 22rpx;
		}
        .middle_left_content{
            padding-left: 24rpx;
            padding-top: 54rpx;
            .middle_title{
                color: #5765C7;
                font-size: 40rpx;
                line-height: 40rpx;
                text-align: left;
            }
            .middle_subtitle{
                margin-top: 10rpx;
                font-size: 30rpx;
                text-align: left;
                color: #5765C7;
            }
            .middle_discount{
                margin-top: 36rpx;
                border-radius: 16px;
                background: #ffffff;
                padding: 6rpx auto;
                font-size: 20rpx;
                text-align: left;
                color: #808CD9; 
                width: 115rpx;
                text-align: center;
            }
        }
	}
    .middle_right{
        width:calc(42% - 28rpx);
        margin-left: 28rpx;
    }
    .middle_right_top{
        height: calc((100% - 24rpx)/2);
        background-color: #AECDF2;

        img {
            position: absolute;
            width: 104rpx;
            height: 104rpx;
            right: 23rpx;
            bottom: 11rpx;
        }


        .middle_right_content {
            padding-left: 16rpx;
            padding-top: 28rpx;
            .middle_title {
                color: #449DC4;
                font-size: 26rpx;
                line-height: 26rpx;
                text-align: left;
            }
    
            .middle_subtitle {
                margin-top: 10rpx;
                font-size: 20rpx;
                line-height: 20rpx;
                text-align: left;
                color: #449DC4;
            }
    
            .middle_discount {
                margin-top: 18rpx;
                border-radius: 16px;
                background: #ffffff;
                padding: 6rpx auto;
                font-size: 16rpx;
                text-align: left;
                color: #449DC4;
                width: 64rpx;
                text-align: center;
            }
        }
    }
    .middle_right_bottom {
        background-color: #AECDF2;
        height: calc((100% - 24rpx)/2);
        img {
            position: absolute;
            width: 70rpx;
            height: 111rpx;
            right: 23rpx;
            bottom: 11rpx;
        }

        .middle_right_content {
            padding-left: 16rpx;
            padding-right: 16rpx;
            padding-top: 28rpx;
            .middle_title {
                max-width:calc(100% - 32rpx); 
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                color: #CE6B79;
                font-size: 26rpx;
                // line-height: 26rpx;
                text-align: left;
            }

            .middle_subtitle {
                max-width:calc(100% - 32rpx); 
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                margin-top: 10rpx;
                font-size: 20rpx;
                // line-height: 20rpx;
                text-align: left;
                color: #DE98A1;
            }

            .middle_discount {
                margin-top: 18rpx;
                border-radius: 16px;
                background: #ffffff;
                padding: 6rpx auto;
                font-size: 16rpx;
                text-align: left;
                color: #CE6B79;
                width: 64rpx;
                text-align: center;
            }

        }
    }


	// 图片+文字位置
	.middle_position {
		position: relative;
	}

	.middle_text {
		position: absolute;
		line-height: 32rpx;
		font-weight: bolder;
		font-size: 32rpx;
		text-align: left;
		color: #FFFFFF;
	}

	.right_text_position {
		top: 40%;
		left: 5%;
	}

	.left_text_position {
		top: 25%;
		left: 10%;
	}

}


// 服务流程
.card_process{
    margin-top:26rpx;
    background: #ffffff;
    border-radius: 12px;
    padding-left: 24rpx;
    padding-right: 24rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;

    
    .card_process_title{
        font-weight: bolder;
        font-size: 18px;
        line-height: 18px;
        text-align: left;
        color: #111111;
        padding-top:11px ;
    }
    .card_process_content{
        padding-top: 16px;
        padding-bottom: 19px;
        display: flex;
        // align-items: center;  //会影响箭头
        text-align: center;
    }
    .process_item {
        flex: 1;

        .arrow_img {
            // width: 100rpx;
            height: 100rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 24rpx;
                height: 18rpx;
            }
        }

        .process_icon {
            img {
                width: 100rpx;
                height: 100rpx;
            }
        }

        .process_text {
            margin-top: 24rpx;
            font-size: 24rpx;
            text-align: center;
            color: #000000;
            line-height: 24rpx;
        }
    }

}


.card_service_list{
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    
}

.goodsListBox{    
    width: 100%;
    display: flex;
    justify-content: space-between;
    // justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* 允许Flex项目换行 */
   text-align: center;
}

.serviceGoodsList {
    width: 48%;
    // flex: 0 0 calc((100% - 24px) / 2);
    // 盒子整体 距下一个10px、
    margin-bottom: 20rpx;
    // margin-right: 20rpx;
    border-radius:12px;
    background: #ffffff;
    

.serviceGoods_img {
    // height: 170px;
    // line-height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
        width: 100%;
        height: auto;
    }
}
.serviceGoods_title {
    max-width:calc(100% - 64rpx); 
    // min-height: 32rpx;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 32rpx;
    // line-height: 32rpx;
    text-align: left;
    color: #333333;
    // margin-top: 20rpx;
    // margin-left: 32rpx;
    // margin-right: 32rpx;
    margin: 20rpx 32rpx 0rpx 32rpx;
}
.serviceGoods_subtitle {
    max-width:calc(100% - 64rpx); 
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 26rpx;
    // line-height: 26rpx;
    text-align: left;
    color: #666666;
    // margin-top: 16rpx;
    // margin-left: 32rpx;
    // margin-right: 32rpx;
    margin: 16rpx 32rpx 0rpx 32rpx;
}

.serviceGoods_price {
    font-weight:bolder;
    line-height: 32rpx;
    font-size: 32rpx;
    text-align: left;
    margin-top: 14rpx;
    margin-bottom: 20rpx;
    margin-left: 32rpx;
    color: #FF6203;
}

}

.serviceGoodsList:nth-child(2n) {
    margin-right: 0;
}


.b12{
    margin-bottom: 12px;
}
</style>
